<template>
    <custom-page-box>
        <div class="success-case-audit-container">
            <div class="table">
                <a-table :data-source="tableData" rowKey="id" :pagination="false">
                    <a-table-column key="x" title="序号" width="60px">
                        <template slot-scope="text, record, index">
                            <span>{{ (pageIndex - 1) * pageSize + index + 1 }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="案例名称" data-index="name" width="80px" :ellipsis="true">
                        <template slot-scope="text, record">
                            <a-button type="link" @click="toDetail(record)" :title="record.name">
                                {{ record.name }}
                            </a-button>
                        </template>
                    </a-table-column>
                    <a-table-column
                        key="address"
                        title="案例地址"
                        data-index="address"
                        width="120px"
                        :ellipsis="true"
                    />
                    <a-table-column
                        key="companyName"
                        title="所属服务商"
                        data-index="companyName"
                        width="120px"
                        :ellipsis="true"
                    />
                    <a-table-column
                        key="serviceKind"
                        title="类目"
                        data-index="serviceKind"
                        width="100px"
                        :ellipsis="true"
                    />
                    <a-table-column
                        key="createTime"
                        title="上传时间"
                        data-index="createTime"
                        width="150px"
                        :ellipsis="true"
                    />
                    <a-table-column key="status" title="状态" data-index="status" width="60px" :ellipsis="true">
                        <template slot-scope="text, record">
                            <span :class="record.status === 0 ? 'blue-txt' : 'green-txt'">{{
                                record.status === 0 ? '待审核' : '已审核'
                            }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column key="c" title="操作" width="140px">
                        <template slot-scope="text">
                            <a-button class="green" v-if="text.status === 0" @click="toAudit(text, true)">
                                通过
                            </a-button>
                            <a-button class="red" v-if="text.status === 0" @click="toAudit(text)">驳回</a-button>
                        </template>
                    </a-table-column>
                </a-table>
            </div>
        </div>
        <custom-pagination
            :total="Number(total)"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            @pagination="getTable"
        ></custom-pagination>
        <a-modal v-model="show" title="案例详情" dialogClass="case-audit-dialog" width="700px" :footer="false">
            <div class="content">
                <div class="head">
                    <p class="name" :title="modalData.name">{{ modalData.name }}</p>
                    <div class="btn" v-if="modalData.status === 0">
                        <a-button icon="check" type="primary" @click="toAudit(modalData, true)">审核通过</a-button>
                        <a-button icon="close" @click="toAudit(modalData)">审核驳回</a-button>
                    </div>
                </div>
                <div class="word">
                    <div>
                        <p>案例类目:</p>
                        <p>{{ modalData.serviceKind }}</p>
                    </div>
                    <div>
                        <p>案例名称:</p>
                        <p>{{ modalData.name }}</p>
                    </div>
                    <div>
                        <p>案例地址:</p>
                        <p>{{ modalData.address }}</p>
                    </div>
                    <div>
                        <p>关联服务:</p>
                        <p>
                            <span
                                v-for="item in modalData.services"
                                :key="item.serviceId"
                            >{{ item.service }}<br /></span>
                        </p>
                    </div>
                    <div>
                        <p>案例标签:</p>
                        <p>{{ modalData.label }}</p>
                    </div>
                    <div>
                        <p>案例金额:</p>
                        <p v-if="modalData.amount">{{ modalData.amount }}万元</p>
                    </div>
                    <div>
                        <p>案例封面:</p>
                        <div class="img-box">
                            <img
                                v-for="(item, index) in modalData.photo"
                                @click="showImg(item, modalData.photo)"
                                :key="index"
                                :src="$staticUrl + '/' + item"
                                alt=""
                            />
                        </div>
                    </div>
                    <div class="video-box">
                        <p>案例视频:</p>
                        <div v-if="modalData.imgCoverUrl" class="imgcover" @click="previewVisible = true">
                            <img :src="$staticUrl + '/' + modalData.imgCoverUrl" alt="" />
                            <a-icon type="caret-right" title="播放视频" />
                        </div>
                    </div>
                    <div>
                        <p>案例完成时间:</p>
                        <p>{{ modalData.finishedTime }}</p>
                    </div>
                    <div>
                        <p>案例详情：</p>
                        <div v-html="modalData.detail" class="modalData-detail"></div>
                    </div>
                </div>
            </div>
        </a-modal>
        <a-modal
            class="videoModal"
            :visible="previewVisible"
            :destroyOnClose="true"
            :footer="null"
            @cancel="handleCancel"
            width="40%"
            title="视频预览"
        >
            <video controls id="video">
                <source :src="$staticUrl + '/' + modalData.videoUrl" type="video/mp4" />
                <source :src="$staticUrl + '/' + modalData.videoUrl" type="video/ogg" />
                <source :src="$staticUrl + '/' + modalData.videoUrl" type="video/webm" />
                <object :data="$staticUrl + '/' + modalData.videoUrl">
                    <embed :src="$staticUrl + '/' + modalData.videoUrl" />
                </object>
            </video>
        </a-modal>
    </custom-page-box>
</template>

<script>
export default {
    name: 'SuccessCaseAudit',
    data () {
        return {
            total: 0,
            pageIndex: 1,
            pageSize: 10,
            tableData: [],
            show: false,
            previewVisible: false,
            modalData: {}
        }
    },
    created () {
        this.getTable()
    },
    methods: {
        async getTable () {
            const res = await this.$ApiServer['case/getTable']({
                currentPage: this.pageIndex,
                pageSize: this.pageSize
            })
            if (res.code === 200) {
                this.tableData = res.data.records || []
                this.total = res.data.total
            } else {
                this.$message.error(res.message)
            }
        },
        toDetail (row) {
            this.modalData = { ...row, photo: row.photo.split(',') }
            this.show = true
        },
        toAudit (row, flag) {
            this.$confirm({
                title: '提示',
                content: `确认是否${flag ? '通过' : '驳回'}案例[${row.name}]`,
                okText: '确认',
                cancelText: '取消',
                onOk: async () => {
                    const res = await this.$ApiServer['case/audit']({
                        id: row.id,
                        status: flag ? 1 : 2
                    })
                    if (res.code === 200) {
                        this.getTable()
                        this.show = false
                        this.modalData = {}
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        },
        showImg (url, urls) {
            this.$picturesModal({
                url,
                urls
            })
        },
        handleCancel () {
            const videoDom = document.querySelector('#video')
            videoDom.pause()
            this.previewVisible = false
        }
    }
}
</script>

<style scoped lang="less">
.success-case-audit-container {
    padding: 10px 20px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 10px;
    .table {
        margin-bottom: 10px;
        height: calc(100vh - 60px - 10px - 100px);
        background: #fff;
    }
}
::v-deep {
    .case-audit-dialog {
        .ant-modal-title {
            text-align: center;
        }
        .content {
            .head {
                position: absolute;
                left: 0;
                top: 0;
                width: calc(100% - 56px);
                height: 54px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .name {
                    padding-left: 16px;
                    width: 200px;
                    overflow: hidden;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                }
            }
            .word {
                & > div {
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    margin-bottom: 10px;
                    & > p {
                        line-height: 22px;
                        &:first-child {
                            min-width: 74px;
                            margin-right: 2px;
                        }
                    }
                }
            }
            .modalData-detail {
                border: 1px solid #e8e8e8;
                padding: 10px;
                width: calc(100% - 74px);
                overflow-x: auto;
                * {
                    word-break: break-all;
                }
            }
            .img-box {
                img {
                    display: inline-block;
                    width: 100px;
                    height: 100px;
                    object-fit: contain;
                    margin-right: 4px;
                    cursor: pointer;
                }
            }
            .video-box {
                div {
                    position: relative;
                    .anticon.anticon-caret-right {
                        color: rgb(218, 218, 218);
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 24px;
                        cursor: pointer;
                    }
                }
                img {
                    width: 100px;
                    height: 100px;
                    object-fit: cover;
                    cursor: pointer;
                }
            }
        }
    }
}
::v-deep {
    .ant-btn-link {
        color: @primary-color !important;
        span {
            display: block;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
            text-decoration: underline;
        }
    }
}
.videoModal {
    ::v-deep {
        #video {
            width: 100%;
            height: 400px;
        }
    }
}
</style>
